﻿<!-- 右侧固定导航栏 -->
<template>
  <div class="rightlistBox">
    <section>
      <div class="r1-head">
        <img
          :src="
            this.$store.state.themeObj.center_smailimg
              ? this.$store.state.themeObj.center_smailimg
              : 'static/img/img01.jpg'
          "
        />
        <h1 style="text-align: center;" v-if="this.$store.state.themeObj.user_start != 0">
          <span>Zlwblog</span>
          <p>不断完善。</p>
          <p class="phover" style="display:inline-block;color: rgb(53,96,143)!important;font-size: 20px;">
            <span>
            {{ articleData.totalArticleNum }}<br>
              <b style="font-weight: normal;font-size: 15px">文章</b>
              </span>
          </p>
          <p class="phover"
             style="margin-top:20px;display:inline-block;color: rgb(53,96,143)!important;font-size: 20px">
            <span>
            {{ articleData.totalTagNum }}<br>
               <b style="font-weight: normal;font-size: 15px">标签</b>
              </span>
          </p>
          <p class="phover"
             style="margin-top:20px;display:inline-block;color: rgb(53,96,143)!important;font-size: 20px">
            <span>
            {{ articleData.totalViewCount }}<br>
               <b style="font-weight: normal;font-size: 15px">浏览</b>
              </span>
          </p>
        </h1>
      </div>

      <div class="r1-body">
        &nbsp;<a class="button--animated" id="card-info-btn" target="_blank" rel="noopener"
                 href="https://space.bilibili.com/523777468"><img align="center"
                                                                  src="https://www.bilibili.com/favicon.ico?v=1"
                                                                  width="15px" height="15px"/><span
        style="font-size: 10px;"> Follow Me</span></a>
      </div>

    </section>

    <!-- 右侧上滑小图片 -->
    <div
      v-if="this.$store.state.themeObj.user_start != 0"
      :class="gotoTop ? 'toTop hidden' : 'toTop goTop hidden'"
      @click="toTopfun"
    >
      <img
        :src="
          this.$store.state.themeObj.right_img
            ? this.$store.state.themeObj.right_img
            : 'static/img/long.png'
        "
        alt=""
      />
    </div>
    <section class="rs4">
      <h1 class="label"><i class="fa">
        <svg style="width: 28px;height: 18px" t="1685689746939" class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="2409" width="200" height="200">
          <path
            d="M336.681427 336.457143m-336.457143 0a336.457143 336.457143 0 1 0 672.914286 0 336.457143 336.457143 0 1 0-672.914286 0Z"
            fill="#8CF6FB" p-id="2410"></path>
          <path
            d="M1011.05857 501.76c16.091429 17.554286 16.091429 45.348571 0 61.44L563.424284 1010.834286c-17.554286 17.554286-45.348571 17.554286-61.44 0L13.389998 529.554286c-8.777143-8.777143-14.628571-20.48-13.165714-32.182857L49.961427 92.16c1.462857-23.405714 19.017143-40.96 42.422857-42.422857L497.595712 0c13.165714 0 24.868571 4.388571 33.645715 13.165714l479.817143 488.594286zM120.17857 119.954286L74.829998 488.594286l456.411429 450.56 406.674285-406.674286L488.81857 74.605714 120.17857 119.954286z"
            fill="#3C2DCB" p-id="2411"></path>
          <path
            d="M342.532855 342.308571c-23.405714 23.405714-59.977143 23.405714-83.382857 0s-23.405714-59.977143 0-83.382857c23.405714-23.405714 59.977143-23.405714 83.382857 0 21.942857 23.405714 21.942857 59.977143 0 83.382857z"
            fill="#D098FF" p-id="2412"></path>
        </svg>
      </i>标签云
      </h1>
      <div id="wordCloud" style="height: 300px; width: 100%;">
      </div>
    </section>
    <section class="rs4">
      <h1 class="label"><i>
        <svg style="width: 28px;height: 18px" t="1685886535066" class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="6398" width="200" height="200">
          <path
            d="M880 944L558.64 818.25a128 128 0 0 0-93.28 0L144 944V208A128 128 0 0 1 272 80h480a128 128 0 0 1 128 128z"
            fill="#FFFFFF" p-id="6399"></path>
          <path
            d="M864 928L559.93 803.61a128 128 0 0 0-96-0.38l-228 91.22A32 32 0 0 1 192 864.73V224a96 96 0 0 1 96-96h480a96 96 0 0 1 96 96z"
            fill="#FFE07A" p-id="6400"></path>
          <path
            d="M630.66 640L512 577.14 393.33 640 416 506.86l-96-94.29 132.67-19.43L512 272l59.33 121.14L704 412.56l-96 94.29L630.66 640z"
            fill="#FFFFFF" p-id="6401"></path>
          <path
            d="M630.66 640L512 577.14l-40.08 8.68A16 16 0 0 1 452.85 567L465 506.86l-34.9-41.21a16 16 0 0 1 6-25.09l60.55-25.42L517.59 363a16 16 0 0 1 27.51-3.83l26.23 34L704 412.56l-96 94.29z"
            fill="#FF9580" p-id="6402"></path>
          <path
            d="M880 960a15.91 15.91 0 0 1-5.83-1.1L552.81 833.15a111.66 111.66 0 0 0-81.62 0L149.83 958.9A16 16 0 0 1 128 944V208c0-79.4 64.6-144 144-144h480c79.4 0 144 64.6 144 144v736a16 16 0 0 1-16 16zM272 96a112.12 112.12 0 0 0-112 112v712.56l299.53-117.21a143.59 143.59 0 0 1 104.94 0L864 920.56V208A112.12 112.12 0 0 0 752 96z"
            fill="#333333" p-id="6403"></path>
          <path
            d="M393.33 656a16 16 0 0 1-15.77-18.69l21.26-124.9-90-88.43a16 16 0 0 1 8.89-27.24L442 378.53 497.63 265a16 16 0 0 1 14.37-9 16 16 0 0 1 14.37 9L582 378.53l124.33 18.2a16 16 0 0 1 8.88 27.27l-90 88.44 21.26 124.9a16 16 0 0 1-23.26 16.82L512 595.24l-111.18 58.9a16 16 0 0 1-7.49 1.86zM354.2 423.73l73 71.71a16 16 0 0 1 4.56 14.1l-17.2 101.11L504.51 563a16 16 0 0 1 15 0l89.94 47.64-17.21-101.1a16 16 0 0 1 4.57-14.1l73-71.72L569 409a16 16 0 0 1-12-8.8l-45-91.79-45 91.8a16 16 0 0 1-12 8.79z"
            fill="#333333" p-id="6404"></path>
        </svg>
      </i>站长推荐
      </h1>
      <!--      <ul>-->
      <!--        <li v-for="(item, index) in topArticleList" :key="'topArticleList' + index">-->
      <!--          -->
      <!--        </li>-->
      <!--      </ul>-->
      <div class="block">
        <el-carousel indicator-position="outside" style="position: relative" trigger="click" height="150px">
          <el-carousel-item v-for="(item,index) in topArticleList" :key="index">
            <img v-if="item.thumbnail" @error="setDefaultImage" title="点击前往" @click="toDetail(item.id)" :src="item.thumbnail">
            <img v-else title="点击前往" @click="toDetail(item.id)" src="../assets/notfound.png">
            <h3>{{ item.title }}</h3>
          </el-carousel-item>
        </el-carousel>
      </div>
    </section>

    <section class="rs4">
      <el-tabs v-model="activeName">
        <el-tab-pane name="first"> <span slot="label"><i>
        <svg style="width: 28px;height: 18px" t="1685690081513" class="icon" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="11448" width="200" height="200">
          <path d="M123.904 485.376h722.944V791.04H123.904z" fill="#FFFFFF" p-id="11449"></path>
          <path
            d="M378.368 46.592z m0 0z m138.752 514.56c-19.968 0-35.328 7.168-46.592 22.016-11.264 14.848-16.896 33.792-16.896 56.832s5.632 41.984 16.896 56.32c11.264 14.848 26.624 22.016 45.568 22.016 19.968 0 35.328-7.168 46.08-20.992 10.752-13.824 16.384-32.768 16.384-56.32 0-24.576-5.12-44.032-15.872-58.368-11.264-14.336-26.112-21.504-45.568-21.504z"
            fill="#D81E06" p-id="11450"></path>
          <path
            d="M959.488 324.608c0-1.024-0.512-2.56-1.024-5.12-18.944 38.4-44.032 69.632-80.896 90.112-36.864 20.48-76.288 26.112-118.272 18.944 0-2.048 0-2.56 0.512-3.584 5.12-17.408 10.24-34.304 14.848-51.712 15.36-61.44 23.552-123.904 19.456-187.392-3.072-54.272-15.36-106.496-44.544-153.6C742.912 20.992 734.72 10.752 726.528 0c-2.048 2.56-3.584 4.096-4.608 5.12-25.088 34.304-49.664 69.632-75.776 103.424-42.496 54.272-89.088 104.96-143.36 147.968-28.16 22.528-57.856 43.008-92.16 56.832-12.288 5.12-14.336 4.096-22.528-6.144-3.072-4.096-6.656-8.192-8.192-12.8-4.608-11.264-9.728-22.528-12.8-34.816-9.216-37.376-8.192-75.264-4.096-112.64 4.096-33.792 9.728-67.584 14.848-100.864-60.928 59.392-117.76 121.856-167.936 190.464-32.768 45.056-61.952 92.16-86.016 141.824-23.552 48.128-42.496 97.792-53.76 150.528-10.752 48.64-15.36 97.28-5.632 146.432 27.648 137.728 104.96 237.568 230.912 299.008 38.4 18.432 78.336 32.256 120.32 40.96 106.496 22.528 204.8 0.512 294.4-57.856 75.776-49.152 130.048-119.808 172.544-198.656 14.848-27.136 27.136-55.808 37.888-84.48 10.752-30.208 19.456-60.416 26.112-91.648 17.92-85.504 20.992-171.52 12.8-258.048zM358.4 758.272h-50.688V660.48H206.848v97.792H156.16V521.216h50.688v95.744h100.864v-95.744H358.4v237.056z m240.64-30.208c-21.504 23.04-49.664 34.304-84.48 34.304-33.792 0-61.44-11.264-82.944-33.28-20.992-22.528-31.744-51.2-31.744-86.016 0-37.376 10.752-67.584 32.256-90.624 21.504-23.04 50.176-34.816 86.016-34.816 33.792 0 60.928 11.264 81.92 33.792 20.48 22.528 31.232 51.712 31.232 87.04 0 36.864-10.752 66.56-32.256 89.6z m238.08-165.376h-67.584v195.584h-50.688V562.688h-67.584v-41.472H837.12v41.472z"
            fill="#D81E06" p-id="11451"></path>
        </svg>
      </i>热门文章</span>
          <!--      <h1 class="label"><i>-->
          <!--        <svg style="width: 28px;height: 18px" t="1685690081513" class="icon" viewBox="0 0 1024 1024" version="1.1"-->
          <!--             xmlns="http://www.w3.org/2000/svg" p-id="11448" width="200" height="200">-->
          <!--          <path d="M123.904 485.376h722.944V791.04H123.904z" fill="#FFFFFF" p-id="11449"></path>-->
          <!--          <path-->
          <!--            d="M378.368 46.592z m0 0z m138.752 514.56c-19.968 0-35.328 7.168-46.592 22.016-11.264 14.848-16.896 33.792-16.896 56.832s5.632 41.984 16.896 56.32c11.264 14.848 26.624 22.016 45.568 22.016 19.968 0 35.328-7.168 46.08-20.992 10.752-13.824 16.384-32.768 16.384-56.32 0-24.576-5.12-44.032-15.872-58.368-11.264-14.336-26.112-21.504-45.568-21.504z"-->
          <!--            fill="#D81E06" p-id="11450"></path>-->
          <!--          <path-->
          <!--            d="M959.488 324.608c0-1.024-0.512-2.56-1.024-5.12-18.944 38.4-44.032 69.632-80.896 90.112-36.864 20.48-76.288 26.112-118.272 18.944 0-2.048 0-2.56 0.512-3.584 5.12-17.408 10.24-34.304 14.848-51.712 15.36-61.44 23.552-123.904 19.456-187.392-3.072-54.272-15.36-106.496-44.544-153.6C742.912 20.992 734.72 10.752 726.528 0c-2.048 2.56-3.584 4.096-4.608 5.12-25.088 34.304-49.664 69.632-75.776 103.424-42.496 54.272-89.088 104.96-143.36 147.968-28.16 22.528-57.856 43.008-92.16 56.832-12.288 5.12-14.336 4.096-22.528-6.144-3.072-4.096-6.656-8.192-8.192-12.8-4.608-11.264-9.728-22.528-12.8-34.816-9.216-37.376-8.192-75.264-4.096-112.64 4.096-33.792 9.728-67.584 14.848-100.864-60.928 59.392-117.76 121.856-167.936 190.464-32.768 45.056-61.952 92.16-86.016 141.824-23.552 48.128-42.496 97.792-53.76 150.528-10.752 48.64-15.36 97.28-5.632 146.432 27.648 137.728 104.96 237.568 230.912 299.008 38.4 18.432 78.336 32.256 120.32 40.96 106.496 22.528 204.8 0.512 294.4-57.856 75.776-49.152 130.048-119.808 172.544-198.656 14.848-27.136 27.136-55.808 37.888-84.48 10.752-30.208 19.456-60.416 26.112-91.648 17.92-85.504 20.992-171.52 12.8-258.048zM358.4 758.272h-50.688V660.48H206.848v97.792H156.16V521.216h50.688v95.744h100.864v-95.744H358.4v237.056z m240.64-30.208c-21.504 23.04-49.664 34.304-84.48 34.304-33.792 0-61.44-11.264-82.944-33.28-20.992-22.528-31.744-51.2-31.744-86.016 0-37.376 10.752-67.584 32.256-90.624 21.504-23.04 50.176-34.816 86.016-34.816 33.792 0 60.928 11.264 81.92 33.792 20.48 22.528 31.232 51.712 31.232 87.04 0 36.864-10.752 66.56-32.256 89.6z m238.08-165.376h-67.584v195.584h-50.688V562.688h-67.584v-41.472H837.12v41.472z"-->
          <!--            fill="#D81E06" p-id="11451"></path>-->
          <!--        </svg>-->
          <!--      </i>热门文章-->
          <!--      </h1>-->
          <ul>
            <li v-for="(item, index) in browseList" :key="'browseList' + index">
              <el-row>
                <el-col :span="8"><img v-if="item.thumbnail" @error="setDefaultImage" @click="toDetail(item.id)" class="hotImg" width="90px" height="50px"
                                       :src="item.thumbnail" alt="">
                  <img v-else @click="toDetail(item.id)" class="hotImg" width="90px" height="50px"
                       src="../assets/notfound.png" alt=""></el-col>
                <el-col :span="16"><a style="text-align: center" :href="'#/DetailArticle?aid=' + item.id"
                                      target="_blank">{{
                    item.title
                  }}</a></el-col>
                <span style="float: right;color: rgb(128,128,128)">-- 浏览量：{{item.viewCount}}</span>
              </el-row>
            </li>
          </ul>
        </el-tab-pane>
        <el-tab-pane label="最新文章" name="second"> <span slot="label">  <i>
          <svg style="width: 24px;height: 18px" t="1686215276917" class="icon" viewBox="0 0 1024 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg"
               p-id="3494" width="200" height="200">
            <path d="M153.12 120.32h716.93v255.2H153.12z" fill="#FDD668" p-id="3495"></path>
            <path
              d="M902.06 948.13L511.59 822.74 121.12 948.13V88.32h780.94zM511.59 755.52l326.47 104.83v-708H185.12v708z"
              p-id="3496"></path>
            <path
              d="M547.77 405.48h46.6l12 86.36L614 552h1c3.64-20.11 7.4-40.53 11.23-60.13l19.34-86.36h38.3l19.92 86.36c3.83 19.34 7.08 39.77 10.91 60.13h1.34c2.3-20.36 4.79-40.53 7.09-60.13l12.25-86.36h43.28l-32.82 189.54h-57.32l-17.24-82.53q-4.6-21.86-7.34-44h-1.27c-2.3 14.23-4.6 29.49-7.41 44l-16.53 82.53h-56.3z"
              p-id="3497"></path>
            <path
              d="M439.01 405.48h120.33v37.66h-74.69v35.17h63.45v38.23h-63.45v40.28h77.49v38.23H439.01V405.48zM244.46 405.48h46.4l47.14 90.7 18.58 42.06h1.28c-2.56-20.17-6.13-47.42-6.13-70.08v-62.68H395v189.57h-46.31l-46.91-91.47L283.2 462h-1.27c2 21.19 5.87 47.17 5.87 70.15v62.93h-43.34zM239.32 220.75H425.3v64H239.32z"
              p-id="3498"></path>
          </svg>
        </i>最新文章</span>
          <ul>
            <li v-for="(item, index) in newList" :key="'newList' + index">
              <el-row>
                <el-col :span="8"><img v-if="item.thumbnail" @error="setDefaultImage" @click="toDetail(item.id)" class="hotImg" width="90px" height="50px"
                                       :src="item.thumbnail" alt="">
                  <img v-else @click="toDetail(item.id)" class="hotImg" width="90px" height="50px"
                       src="../assets/notfound.png" alt=""></el-col>
                <el-col :span="16"><a style="text-align: center" :href="'#/DetailArticle?aid=' + item.id"
                                      target="_blank">{{
                    item.title
                  }}</a></el-col><span style="float: right;color: rgb(128,128,128)">-- 发布时间：{{item.createTime}}</span>
              </el-row>
              <!--          —— {{ item.viewCount }} 次围观-->
            </li>
          </ul>
        </el-tab-pane>
      </el-tabs>
    </section>

    <!--    <section class="rs4">-->
    <!--      <h2 class="ui label">社交平台</h2>-->
    <!--      <div class="r1-body">-->
    <!--        <div class="catch-me">-->
    <!--          <div class="">-->
    <!--            <div>-->
    <!--              <el-tooltip style="margin-top:30px" class="item" content="Gitee" placement="top">-->
    <!--                <a :href="catchMeObj.git" target="_blank"-->
    <!--                ><i class="fa fa-fw fa-github"></i-->
    <!--                ></a>-->
    <!--              </el-tooltip>-->
    <!--              <el-tooltip class="item" effect="dark" content="QQ" placement="top">-->
    <!--                <a :href="catchMeObj.qq" target="_blank"-->
    <!--                ><i class="fa fa-fw fa-qq"></i-->
    <!--                ></a>-->
    <!--              </el-tooltip>-->
    <!--              <el-tooltip-->
    <!--                class="item"-->
    <!--                effect="dark"-->
    <!--                content="B站"-->
    <!--                placement="top"-->
    <!--              >-->
    <!--                <a :href="catchMeObj.bilibili" target="_blank"><i style="font-weight: bolder" class="">B</i></a>-->
    <!--              </el-tooltip>-->
    <!--            </div>-->
    <!--            <div class="">-->
    <!--              <el-tooltip-->
    <!--                class="item"-->
    <!--                effect="dark"-->
    <!--                content="微信"-->
    <!--                placement="top"-->
    <!--              >-->
    <!--                <a :href="catchMeObj.wechat" target="_blank"-->
    <!--                ><i class="fa fa-fw fa-wechat"></i-->
    <!--                ></a>-->
    <!--              </el-tooltip>-->
    <!--              <el-tooltip-->
    <!--                class="item"-->
    <!--                effect="dark"-->
    <!--                content="CSDN"-->
    <!--                placement="top"-->
    <!--              >-->
    <!--                <a :href="catchMeObj.csdn" target="_blank"-->
    <!--                ><i style="font-weight: bolder" class="">C</i-->
    <!--                ></a>-->
    <!--              </el-tooltip>-->
    <!--            </div>-->

    <!--          </div>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </section>-->
  </div>
</template>


<script>
import defaultImage from "../assets/notfound.png"
import * as echarts from 'echarts/core';
import 'echarts-wordcloud';
import {TooltipComponent} from 'echarts/components';
import {getTagAndCount} from "../api/tag";
import {articleData, getTopList, hotArticleList, newArticleList} from "../api/article";
import {setDefaultImage} from "../utils/common";

echarts.use([TooltipComponent]);
export default {
  data() {
    //选项 / 数据
    return {
      newList: [],
      activeName: 'first',
      browseList: "", //热门文章 浏览量最多
      catchMeObj: {
        //个人信息
        git: "https://gitee.com/zlw666",
        qq: "/static/img/qq.png",
        csdn: "https://www.csdn.net/",
        wechat: "/static/img/wx.JPG",
        bilibili: "https://space.bilibili.com/523777468?spm_id_from=333.1007.0.0",
        job: "https://www.baidu.com",
      },
      topArticleList: [],
      // 标签云图数据
      echartsData: [],
      total: 0,
      fixDo: false,
      loveme: false,
      gotoTop: false, //返回顶部
      going: false, //是否正在执行上滑动作
      artCommentList: "", //最新评论
      articleData: {//文章数据
        totalArticleNum: null,
        totalViewCount: null,
        totalTagNum: null
      },
    };
  },
  mounted() {
  },

  created() {
    //生命周期函数
    var that = this;
    window.onscroll = function () {
      var t = document.documentElement.scrollTop || document.body.scrollTop;
      // console.log(t);
      if (!that.going) {
        if (t > 600) {
          that.gotoTop = true;
        } else {
          that.gotoTop = false;
        }
      }
      if (t > 1200) {
        that.fixDo = true;
      } else {
        that.fixDo = false;
      }
    };

    this.getArticleData();
    this.listTagAndCount()
    this.getHotArticleList()
    this.getNewArticleList()
    this.getTopList()
  },
  methods: {
    setDefaultImage,
    getTopList() {
      console.log("into top!")
      getTopList().then((res) => {
        this.topArticleList = res
        console.log("top：" + this.topArticleList[0].title)
      })
    },
    toDetail(id) {
      // 路由跳转新标签页
      const href = this.$router.resolve({
        path: '/DetailArticle?aid=' + id,
      }).href;
      console.log(href)
      window.open(href, '_blank')
    },
    //事件处理器
    toTopfun: function (e) {
      var that = this;
      this.gotoTop = false;
      this.going = true;
      var timer = setInterval(function () {
        //获取滚动条距离顶部高度
        var osTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        var ispeed = Math.floor(-osTop / 7);
        document.documentElement.scrollTop = document.body.scrollTop =
          osTop + ispeed;
        //到达顶部，清除定时器
        if (osTop == 0) {
          that.going = false;
          clearInterval(timer);
          timer = null;
        }
      }, 30);
    },
    getArticleData() {
      articleData().then((response) => {
        this.articleData = response;
      });
    },
    getHotArticleList() {
      hotArticleList().then((response) => {
        this.browseList = response;
      });
    },
    getNewArticleList() {
      newArticleList().then((response) => {
        this.newList = response;
      });
    },
    listTagAndCount() {
      getTagAndCount().then((res) => {
        this.echartsData = res;
        this.initChart();
      })
    },
    initChart() {
      var myChart = echarts.init(document.getElementById('wordCloud'));
      const option = {
        // title: {
        //   text: '标签',
        //   x: "center"
        // },
        tooltip: {},
        backgroundColor: "#fff",
        series: [
          {
            type: "wordCloud",
            //用来调整词之间的距离
            gridSize: 10,
            //用来调整字的大小范围
            // Text size range which the value in data will be mapped to.
            // Default to have minimum 12px and maximum 60px size.
            sizeRange: [14, 40],
            // Text rotation range and step in degree. Text will be rotated randomly in range [-90,                                                                             90] by rotationStep 45
            //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
            // rotationRange: [-45, 0, 45, 90],
            // rotationRange: [ 0,90],
            rotationRange: [0, 0],
            //随机生成字体颜色
            // maskImage: maskImage,
            textStyle: {
              color: function () {
                return (
                  "rgb(" +
                  Math.round(Math.random() * 255) +
                  ", " +
                  Math.round(Math.random() * 255) +
                  ", " +
                  Math.round(Math.random() * 255) +
                  ")"
                );
              }
            },
            //位置相关设置
            // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
            // Default to be put in the center and has 75% x 80% size.
            left: "center",
            top: "center",
            right: null,
            bottom: null,
            width: "100%",
            height: "100%",
            //数据
            data: this.echartsData,
          }
        ],
      };
      myChart.setOption(option);
      //根据窗口的大小变动图表
      window.onresize = function () {
        myChart.resize();
      }
      // 点击某个字
      let that = this;
      myChart.on('click', function (params) {
        console.log('myChart----click---:', params, '------', params.data, '--name', params.data.name, '---value', params.data.value, '---id', params.data.id)
        that.$router.push({path: '/Share', query: {paramsId: params.data.id}})
      });
      // myChart.on('mousemove', function (params) {
      // });
    }
  },
  components: {
    //定义组件
  },

};
</script>

<style lang="less">
.el-carousel__item h3 {
  position: absolute;
  width: 100%;
  bottom: 0;
  text-align: center;
  background: rgba(0, 0, 0, .3);
  font-weight: 900;
  color: whitesmoke;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 20px;
}

.el-carousel__item img {
  width: 100%;
  height: inherit;
}


.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.hotImg {
  transition: transform 0.5s ease;
}

.hotImg:hover {
  transform: scale(1.2);
}

.label {
  font-size: 22px;
  font-weight: bolder;
}

#card-info-btn {
  display: block;
  margin-top: 0.7rem;
  //background-color: rgb(73, 177, 245);
  background-image: linear-gradient(to right, rgb(73, 177, 245), rgb(139,138,224)); /*按钮颜色从左到右渐变*/
  transition: background-position 2s ease-in-out;
  color: #fff;
  text-align: center;
  line-height: 2.4;
}

#card-info-btn:hover {
  background-image: linear-gradient(to right, #ffbf00, #eb1e23); /*按钮颜色从左到右渐变*/
  //background-image: linear-gradient(to right, rgb(107, 72, 120)); /*按钮颜色从左到右渐变*/
  //background-color: rgb(116, 101, 145);
}

#card-info-btn:hover:before,
#card-info-btn:hover:after {
  background-image: none; /*去除按钮伪元素的渐变背景*/
}

a, img {
  cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur), pointer;
}

.rightlistBox {
  position: relative;
}

.rightlistBox section {
  transition: all 0.2s linear;
  position: relative;
  background: #fff;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 5px;
}

.rightlistBox section:hover {
  transform: translate(0, -2px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.rightlistBox .r1-head {
  float: left;
  left: 20px;
  border-radius: 4px 4px 0 0;

  position: relative;
  /*box-shadow: inset 0 -70px 100px -50px rgba(0,0,0,.5);*/
}

.rightlistBox .r1-head img {

  width: 40%;

  min-height: 120px;

}

.phover {
  color: rgb(62, 159, 159) !important;
  padding-left: 15px;
}

.r1-head h1 .phover:hover {
  cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur), pointer;;
  color: rgb(250, 219, 175) !important;
  font-size: 30px;
}

.rightlistBox .r1-head h1 {
  position: absolute;
  bottom: -20px;
  margin: 10px 0 10px -100px;
  font-size: 20px;
  letter-spacing: 0.5px;
  color: black;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
  //font-weight: 700;
  width: 200px;
  left: 63%;
  line-height: 30px;
}

.rightlistBox .r1-head h1 span {
  //opacity: 0.3;
}

.rightlistBox .r1-head h1 p {
  //opacity: 0.3;

  font-size: 15px;
  color: rgb(144, 147, 153) !important;
  text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
}

.rightlistBox .r1-body p {
  font-size: 14px;
  margin: 5px 20px 8px 0;
  font-weight: 700;
  text-align: center;
}

.rightlistBox .r1-body .catch-me {
  text-align: center;
}

.rightlistBox .r1-body .catch-me a {
  display: inline-block;
  margin-bottom: 7px;
  position: relative;
  text-decoration: none;
}

.rightlistBox .r1-body .catch-me a:hover i {
  color: #fff;
  background: #f4692c;
}

.rightlistBox .r1-body .catch-me a i {
  display: inline-block;
  font-size: 18px;
  width: 42px;
  height: 42px;
  line-height: 42px;
  border-radius: 42px;
  color: rgba(0, 0, 0, 0.5);
  background: rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  font-style: normal;
  margin: 0 3.2px;
}

/*************do you like me*******************/
.rightlistBox .rs2 {
  /*padding:10px 0 4px 0;*/
  min-height: 100px;
}

.rightlistBox .rs2.fixed {
  position: fixed;
  top: 40px;
  width: 22%;
}

.rightlistBox .rs2 p {
  color: #df2050;
  cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur), pointer;;
  font-size: 20px;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  margin-top: 10px;
  font-weight: 500;
}

.rightlistBox .rs2 div {
  color: #df2050;
  cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur), pointer;;
  text-align: center;
  font-size: 40px;
  position: absolute;
  width: 100%;
  height: 100px;
  line-height: 100px;
  left: 0;
  top: 30px;
}

.rightlistBox .rs2 div i.heart {
  display: inline-block;
  text-align: center;
  width: 100px;
  height: 100px;
  margin-left: -20px;
  margin-top: -5px;
  background: url(../../static/img/heart.png) no-repeat;
  background-position: 0 0;
  cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur), pointer;;
  -webkit-transition: background-position 1s steps(28);
  transition: background-position 1s steps(28);
  -webkit-transition-duration: 0s;
  transition-duration: 0s;
  vertical-align: middle;
}

.rightlistBox .rs2 div i.heart:hover {
  transform: scale(1.15);
  -webkit-transform: scale(1.15);
}

.rightlistBox .rs2 div i.heart.active {
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  background-position: -2800px 0;
}

.rightlistBox .rs2 div span {
  margin-left: -30px;
}

/**********排队来说*************/
.rightlistBox .rs3 .rs3-item {
  font-size: 13px;
  line-height: 20px;
}

.rightlistBox .rs3 .rs3-item a {
  display: block;
  padding: 5px;
  transition: all 0.3s ease-out;
  border-bottom: 1px solid #ddd;
  margin: 5px 0;
}

.rightlistBox .rs3 .rs3-item a:hover {
  background: rgba(230, 244, 250, 0.5);
  border-radius: 5px;
}

.rightlistBox .rs3 .rs3-photo {
  float: left;
}

.rightlistBox .rs3 .rs3-photo img {
  border-radius: 50%;
  width: 32px;
  height: 32px;
  object-fit: cover;
}

.rightlistBox .rs3 .rs3-inner {
  margin-left: 40px;
}

.rightlistBox .rs3 .rs3-inner .rs3-author {
  font-weight: 700;
}

.rightlistBox .rs3 .rs3-inner .rs3-text {
  font-size: 12px;
  text-align: justify;
}

.rightlistBox .rs3 .rs3-item:last-child a {
  border-bottom: none;
}

/************排队看这些***************/
.rightlistBox .rs4 li {
  padding: 8px 0;
  text-align: justify;
}

.rightlistBox .rs4 li a {
  font-weight: 600;
}

.rightlistBox .rs4 li a:hover {
  color: #64609e;
}

/*回到顶部*/
/*返回到顶部*/
.toTop {
  position: fixed;
  right: 40px;
  top: -150px;
  z-index: 99;
  width: 70px;
  height: 900px;
  transition: all 0.5s 0.3s ease-in-out;
  cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur), pointer;;
}

.goTop {
  top: -950px;
}

.toTop img,
.toTophui img {
  width: 100%;
  height: auto;
}

.toTophui {
  position: fixed;
  right: 10px;
  bottom: 80px;
  z-index: 99;
  width: 120px;
  height: 120px;
  transition: all 0.5s 0.3s ease-in-out;
  cursor: url(https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/img/pointer.cur), pointer;;
  animation: toflow 2s ease-in-out infinite;
}

@keyframes toflow {
  0% {
    /*top:400px;*/
    transform: scale(0.95) translate(0, 10px);
  }
  50% {
    /*top:410px;*/
    transform: scale(1) translate(0, 0px);
  }
  100% {
    /*top:400px;*/
    transform: scale(0.95) translate(0, 10px);
  }
}

.goTophui {
  bottom: 120vh;
}
</style>
